<template>
	<view class="container">
		<view class="cu-card" style="min-height: 600px;">
			<view class="reg_box">
				<view class="reg_box_bg"></view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">所属银行</view>
					<input data-key="bank" focus placeholder="请输入" v-model="bank" />
				</view>		
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">持卡人</view>
					<input data-key="name" focus placeholder="请输入" v-model="name" disabled="true"/>
				</view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">帐号</view>
					<input data-key="account" focus placeholder="请输入" v-model="account" />
				</view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">开户地址</view>
					<input data-key="address" focus placeholder="请输入" v-model="address"  />
				</view>
				<view class="cu-form-group margin-lr-lg border-b-line padding-0">
					<view class="title">默认</view>
					<switch :class="[isChecked ? 'blue checked' : 'blue']" :checked="isChecked" @change="switchChange" />
				</view>
			</view>
			<view class="cu-form-group margin-lr-lg padding-0 submit_btn">
				<button class="cu-btn bind_btn" type="button" @click="updateData" v-if="bank_id == 0">立即绑定</button>
				<button class="cu-btn del_btn" type="button" @click="delBank" v-if="bank_id > 0">解除绑定</button>
				<button class="cu-btn bind_btn" type="button" @click="updateData" v-if="bank_id > 0">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank:'',
				name:'',
				account:'',
				address:'',
				isChecked:false,
				type:'',
				bank_id:0,
				bankInfo:[],
				userinfo:[],
			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
			
			this.type = option.type;
			if(this.type == 'add'){
				uni.setNavigationBarTitle({
					title: '新增银行卡'
				});
			}
			if(this.type == 'edit'){
				uni.setNavigationBarTitle({
					title: '编辑银行卡'
				});
				this.bank_id = option.bank_id;
				this.getBankInfo();
			}
		},
		onNavigationBarButtonTap(val) {
			this.updateData();
		},
		methods: {
			switchChange: function (e) {
				this.isChecked = e.detail.value;
			},
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					this.name = this.userinfo.name;
					uni.hideLoading();
					
					if(this.userinfo.auth == 0){
						uni.showModal({
							title: "提示",
							content: '帐户未实名，现在实名？',
							showCancel:false,
							confirmText: "现在实名",
							success:function(res){
								if(res.confirm){
									uni.navigateTo({
										url: "/pages/user/certification"
									})
								}
							}
						})
					}
				})
			},
			getBankInfo:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['bank_id='+this.bank_id,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getBankInfo",
					timestamp:timestamp,
					data:{bank_id:this.bank_id,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.bankInfo = res.data.data.bankInfo;
					this.bank = this.bankInfo.bank;
					this.name = this.bankInfo.name;
					this.account = this.bankInfo.account;
					this.address = this.bankInfo.address;
					this.isChecked = this.bankInfo.is_default == 1 ? true : false;
					
					uni.hideLoading();
				})
			},
			updateData:function(){
				if(this.bank == ''){
					uni.showToast({
						title:"请填写所属银行",
						icon:"none"
					})
					return;
				}
				if(this.name == ''){
					uni.showToast({
						title:"请填写持卡人姓名",
						icon:"none"
					})
					return;
				}
				if(this.account == ''){
					uni.showToast({
						title:"请填写帐号",
						icon:"none"
					})
					return;
				}
				if(this.address == ''){
					uni.showToast({
						title:"请填写银行开户地址",
						icon:"none"
					})
					return;
				}
				//获取基础参数
				uni.showLoading({
					title:"数据更新中",
					mask:true
				})
				var info = uni.getStorageSync("userinfo");
				var is_default = this.isChecked ? 1 : 0;
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type='+this.type,'is_default='+is_default,'bank_id='+this.bank_id,'bank='+this.bank,'name='+this.name,'account='+this.account,'address='+this.address,'timestamp='+timestamp,'token='+info.token]);
				this.helper.req({
					api:"saveBank",
					timestamp:timestamp,
					data:{type:this.type,is_default:is_default,bank_id:this.bank_id,bank:this.bank,name:this.name,account:this.account,address:this.address,token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					uni.hideLoading();
					uni.showModal({
						title: "提示",
						content: '银行卡保存成功',
						showCancel:false,
						confirmText: "确定",
						success:function(res){
							if(res.confirm){
								uni.redirectTo({
									url: '/pages/bank/index',
								});	
							}
						}
					})
				})
			},
			delBank:function(){
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认删除银行卡？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:"数据删除中",
								mask:true
							})
							var info = uni.getStorageSync("userinfo");
							let timestamp = that.helper.now();
							let sign = that.helper.setSign(['bank_id='+that.bank_id,'token='+info.token,'timestamp='+timestamp]);
							that.helper.req({
								api:"delBank",
								timestamp:timestamp,
								data:{bank_id:that.bank_id,token:info.token},
								header:{sign:sign},
								method:'POST',
							}).then(res=>{
								uni.hideLoading();
								if(res.data.errorcode>0){
									uni.showToast({
										title:res.data.message,
										icon:"none"
									})
									return;
								}else{
									uni.showToast({
										title: "银行卡删除成功",
										icon: "success"
									})
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/bank/index',
										});	
									}, 300);
								}
							})
						}
					}
				})
			},
			//链接
			toUrl:function(url){
				// console.log(url);
				uni.navigateTo({
					url: url,
				});	
			},
		},
	};
</script>

<style lang="scss">
	page {
		background:#ddeafd;
	}
	.reset_title{
		font-size: 50upx;
		padding: 20upx;
	}
	.cu-form-group{
		background: none;
		height: 60px;
		
		input{
			color:#353535;
			text-align: right;
		}
		.text-blue{
			color: #4079ff;
		}
		
	}
	.cu-form-group .title {
		min-width: 200upx;
		color: #353535;
	}
	.logo{
		padding: 80px 0 50px;
		text-align: center;
		image{
			width: 100px;
			height: 100px;
		}
	}
	.lg_img{
		width: 24px;
		height: 24px;
	}
	.reg_box{
		width: 88vw;
		margin: 6vw;
		padding: 8px 0;
		// background: #ffffff;
		border-radius: 6px;
		position: relative;
		
		.reg_box_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #fff;
			border-radius: 10px;
		}
	}
	.submit_btn .bind_btn,.del_btn{
		background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		height: 50px;
		width: 70vw;
		color: #fff;
		line-height: 50px;
		font-size: 20px;
		border-radius: 30px;
		margin-left: 10vw;
		margin-top: 4vw;
	}
	.del_btn{
		background: #d36a6a;
		color:#353535;
	}

</style>